import { Row, Col, Form, Card, Input, Button, message } from 'antd';
import { EditOutlined } from '@ant-design/icons';
import styles from './Account.module.scss';
import { request } from "../../utils/request";
import { useEffect } from 'react';
import { useState } from 'react';

export default function Profile(props) {
    const [form1] = Form.useForm()
    const [form2] = Form.useForm()
    const [loading1, setLoading1] = useState(false);
    const [loading2, setLoading2] = useState(false);
    console.log('props,prps', props.user)
    const submitInfo = async (values) => {
        console.log('vaules', values)
        values.id = props.user.id;
        setLoading1(true);
        const ret = await request(`${props.apiUrl}/api/user/updateUser`, values)
        setLoading1(false)
        if (ret.code === 100000) {
            message.success('You have update you details success')
        }
    }
    const submitAccount = async (values) => {
        console.log('values', values)
        if(Object.keys(values).length === 0){
            return;
        }
        setLoading2(true);
        values.id = props.user.id;
        const ret = await request(`${props.apiUrl}/api/user/changePassword`, values)
        setLoading2(false)
        if (ret.code === 100000) {
            message.success('You have update you account success')
        } else {
            message.error(ret.data.message)
        }
    }
    const validatePassword = (rule, value, callback) => {
        console.log('value', value)
        // 校验密码强度
        // 1. 必须同时包含大写字母、小写字母和数字，三种组合
        // 2. 长度在8-30之间
        const passwordReg = /^(?=.*\d)(?=.*[a-z])(?=.*[A-Z]).*$/;
        if (value) {
            if (!passwordReg.test(value)) {
                callback('please enter corret pasword');
            }
            if (value.length < 8 || value.length > 16) {
                callback('please enter corret pasword')
            }
        }
        callback();
    };
    useEffect(() => {
        form1.setFieldsValue(props.user)
        form2.setFieldsValue({
            email:props.user?.email
        })
    }, [props.user])
    return (
        <Row gutter={[{ xs: 8, sm: 16, md: 24 }, 15]} className={styles['box-profile']}>
        
            <Col xs={24} md={12} xxl={8}>
                <Card title="Your Details" >
                    {/* <div className={styles["profile-info"]}>
                        <div className={styles['profile-info-row']}>
                            <span className={styles['profile-info-row-title']}>Name</span>
                            <span>xx</span>
                        </div>
                        <div className={styles['profile-info-row']}>
                            <span className={styles['profile-info-row-title']}>Name</span>
                            <span>Phone</span>
                        </div>
                    </div> */}
                    <Form
                        form={form1}
                        layout='vertical'
                        onFinish={submitInfo}

                    >
                        <Form.Item name="firstName" label="First Name">
                            <Input size="large" />
                        </Form.Item>
                        <Form.Item name="LastName" label="Last Name">
                            <Input size="large" />
                        </Form.Item>
                        <Form.Item name="phone" label="Phone">
                            <Input size="large" />
                        </Form.Item>
                        <Form.Item>
                            <Button htmlType="submit" type='primary' loading={loading1}>Save</Button>
                        </Form.Item>
                    </Form>
                </Card>

            </Col>
            <Col xs={24} md={12} xxl={8}>
                <Card title="Account" extra={props.user?.username}>
                    <Form
                        form={form2}
                        layout='vertical'
                        onFinish={submitAccount}
                    >
                        <Form.Item
                            name="email"
                            label="Email"
                            rules={[
                                {
                                    required: false,
                                    message: "Email address is not in the correct format (xxx@yyy.zzz). Please correct the email address",
                                    type: 'email'
                                },
                            ]}
                        >
                            <Input size="large" />
                        </Form.Item>
                        {/* <Form.Item
                            label="Change Password"
                            style={{ marginBottom: 0 }}
                        >
                            <Form.Item label="Current Password"
                                className={styles.password} name="currentPass"
                                rules={[
                                    {
                                        required: false,
                                        message: "Password is not in the correct format",
                                        validator: (rule, value, callback) => { validatePassword(rule, value, callback) }
                                    },
                                ]}
                            >
                                <Input.Password size="large" />
                            </Form.Item>
                            <Form.Item label="New Password"
                                className={styles.password}
                                name="password"
                                rules={[
                                    {
                                        required: false,
                                        message: "Password is not in the correct format",
                                        validator: (rule, value, callback) => { validatePassword(rule, value, callback) }
                                    },
                                ]}>
                                <Input.Password size="large" />
                            </Form.Item>
                        </Form.Item> */}
                        <Form.Item >
                            <Button htmlType="submit" type='primary' loading={loading2}>Save</Button>
                        </Form.Item>
                    </Form>
                </Card>

            </Col>
        </Row>

    );
}
